<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/*相对定位，box2图片压到box1上*/
			div.box1{
				width: 250px;
				height:250px;
				background: #e4393c;
				/*声明一个相对定位与方向属性*/
				position:relative;
				left:0px;
				top:0px;
				z-index: 2;
			}
			div.box2{
				width: 250px;
				height:250px;
				background: #ffff00;
				/*声明一个相对定位与方向属性*/
				position:relative;
				
				background-size: 100%;
				left:11px;
				top:0px;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对于父元素定位
		     功能：单一元素定位，元素在正常文档流种    推荐
			 position属性：relative；声明元素可以用相对定位意义
			            方向属性：left、right、top、bottom
						堆叠顺序属性：z-index
						        属性值越大，数值越大，越靠前
								绝对定位  按照定位祖先【页面左上角】进行定位
								功能：脱离文档流，不占据原空间
								方向属性和叠加属性和 相对 固定定位共用
								position属性：absolute；声明元素可以使用绝对定位
		 -->
		 <div class="box1" ></div>
		 <div class="box2"></div>
	</body>
</html>